<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Profile</title>
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="js/TableTools.js"></script>
	
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
	<link rel="stylesheet" href="/ecofitness/css/TableTools.css">
	<link rel="stylesheet" href="/ecofitness/css/stylebase.css">
	<link rel="stylesheet" href="/ecofitness/css/default.css">
	<link rel="stylesheet" href="/ecofitness/css/fonts.css">
	
</head>
<body>

	<form action="/ecofitness/sign.view"  method=post>
					<input type="submit" name="submit" value="Deconnexion">
	</form>
	
	<div id="tabs">
		<ul>
			<li><a href="#article_add"><span>Ajouter article</span></a></li>
		</ul>
		<div id="article_add">
			<div id="error">${error}</div>  
			<form id="article_form" method="post" enctype="multipart/form-data" >
				<label for="label">Label: </label>
				<input type="text" name="label" id="label" /><br/>
				<label for="description">Description: </label>
				<textarea rows="4" cols="50" id="description" name="description"></textarea>
				<br/>
				<label for="point">Point: </label>
				<input type="text" id="point" name="point"/>
				<br/>
				<label for="photo">Photo: </label>
				<input type="file" name="photo" size="50" /><br/>
				<input type="button" id="create_article" name="create_article" value="Ajouter article">
		 	</form>
		</div>
	</div>
	
	<div style="float:right;width:100%;height:300px;overflow-y: auto;">
	 	<fieldset>
		    <legend>Articles:</legend>
		 	<table id="articles">
		 		<thead>
			        <tr>
			            <th>id</th>
			            <th>photo</th>
			            <th>label</th>
			            <th>description</th>
			            <th>point</th>
			        </tr>
			    </thead>
			    <tbody> 
			    	<c:forEach items="${listArticles}" var="article">
			    		
						<tr>
							<td><a href="/ecofitness/article/get.view?id=${article.id}">${article.id}</a></td><td><img src="${article.photo}" alt="Not found" width="100" height="100"/></td><td>${article.label}</td><td>${article.description}</td><td>${article.point}</td>
						</tr>
						
					</c:forEach >
			    </tbody>
		 	</table>
		</fieldset>
	</div>
	
	<div style="float:right;width:100%;height:300px;overflow-y: auto;">
	 	<fieldset>
		    <legend>Commandes:</legend>
		 	<table id="commandes">
		 		<thead>
			        <tr>
			            <th>id</th>
			            <th>client</th>
			            <th>article</th>
			            <th>date de commande</th>
			            <th>date de livraison</th>
			            <th>date de reception</th>
			        </tr>
			    </thead>
			    <tbody> 
			    	<c:forEach items="${listCommandes}" var="commande">
						<tr>
							<td><a href="/ecofitness/command/get.view?id=${commande.id}">${commande.id}</a></td><td>${commande.client.login}</td><td>${commande.article.label}</td><td>${commande.dateCommande}</td><td>${commande.dateLivraison}</td><td>${commande.dateReception}</td>
						</tr>
					</c:forEach >
			    </tbody>
		 	</table>
		</fieldset>
	</div>
 	<script type="text/javascript">
		$(document).ready(function() {
		    var oTable=$('#articles').dataTable();
		    $('#commandes').dataTable();
		    if($( "#tabs" )!=null)
				$( "#tabs" ).tabs();
		    $("#create_article").click( function() {
				var oData =new FormData(document.getElementById("article_form"));
				
				$.ajax({
	                url:"/ecofitness/article/add.json", 
	                type:"POST", 
	                data:oData,
	                contentType: false,
	                processData: false,
	                
	                success: function(data) {
	                	alert(data.info);
	                	
	                },
					error: function (xhr, ajaxOptions, thrownError) {
				        alert(xhr.status);
				        alert(thrownError);
				      }
	            });
			});
		});
		
	</script>

</body>
</html>